<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第五天 数据驱动视图</title>
</head>
<body>
	<div id="app">
		
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
	<script type="text/javascript">

		//提醒一下，
		//当使用路由参数时，
		//例如从 /home/web 导航到 /home/java，
		//原来的组件实例会被复用。
		//因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。
		//不过，这也意味着组件的生命周期钩子不会再被调用。
		let Login = {
			template:`<div>
						登录
					  </div>`
		};

		let Home = {
			template:`<div>
						首页<br/>
						<router-link :to="{name:'one',params:{id:'web'}}">前端</router-link>
						<router-link :to="{name:'one',params:{id:'java'}}">后台</router-link>
						<router-view/>
					  </div>`
		};

		let One = {
			data(){
				return{
					msg:''
				}
			},
			template:`<div>
				我是{{msg}}
			</div>`,
			created(){
				//发起ajax
				this.msg = 'web'
			},
			watch:{
				//在当前组件内部 监听路由信息的变化
				'$route'(to,from){
					console.log(to);
					console.log(from);
					this.msg = to.params.id;
				}
			}
		};


		let router = new VueRouter({
			routes:[{
				path:'/login',
				component:Login
			},
			{
				path:'/home',
				name:'home',
				component:Home,
				children:[{
					name:'one',
					path:'/home/:id',
					component:One
				}]
			}]
		});


		Vue.component('App',{
			template:`<div>
						<router-link to='/login'>登录</router-link>
						<router-link :to="{name:'home'}">首页</router-link>
						<router-view/>
					  </div>`
		})

		new Vue({
			el:'#app',
			data(){
				return {

				}
			},
			router:router,
			template:`<App/>`
		})
	</script>
</body>
</html>
